<template>
  <div class="ADynamicAnalysis">
    <el-card>
      <div class="searchBox">
        <h3><span class="tt"></span> 动态总览</h3>
        <div>
          <el-radio-group v-model="type" size="small" fill="#7b94d8">
            <el-radio-button label="1">今日</el-radio-button>
            <el-radio-button label="2">总计</el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <el-row class="cardRow" :gutter="20">
        <el-col :span="6">
          <div class="card">
            <h3>
              <span class="point"></span>
              动态发布条数
            </h3>
            <h1>
              <i class="iconfont">&#xe7c2;</i>
              300
            </h1>
            <div class="line"></div>
            <div class="foot"><i class="iconfont">&#xe746;</i>2021-10-05</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="card">
            <h3>
              <span class="point"></span>
              发布率
            </h3>
            <h1>
              <i class="iconfont">&#xe6f9;</i>
              300
            </h1>
            <div class="line"></div>
            <div class="foot"><i class="iconfont">&#xe746;</i>2021-10-05</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="card">
            <h3>
              <span class="point"></span>
              动态回复数
            </h3>
            <h1>
              <i class="iconfont">&#xe7b2;</i>
              300
            </h1>
            <div class="line"></div>
            <div class="foot"><i class="iconfont">&#xe746;</i>2021-10-05</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="card">
            <h3>
              <span class="point"></span>
              动态回复率
            </h3>
            <h1>
              <i class="iconfont">&#xe6f9;</i>
              300
            </h1>
            <div class="line"></div>
            <div class="foot"><i class="iconfont">&#xe746;</i>2021-10-05</div>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card style="margin-top: 20px">
      <div class="searchBox">
        <h3><span class="tt"></span> 动态分析</h3>
        <div>
          <el-date-picker
            size="small"
            v-model="timeArr"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="timeOptions"
            value-format="yyyy-MM-dd"
            @change="focus"
          >
          </el-date-picker>
          <el-button class="btn" icon="el-icon-search" size="small"
            >查询搜索</el-button
          >
          <el-button icon="el-icon-paperclip" size="small">导出EXCEL</el-button>
        </div>
      </div>
      <el-row class="cardRow" :gutter="20">
        <el-col :span="12">
          <div class="card1">
            <el-row class="cardRow1" :gutter="20">
              <el-col :span="6">
                <div class="iconbox">
                  <i class="iconfont">&#xe7c2;</i>
                </div>
              </el-col>
              <el-col :span="6">
                <h3><i class="point"></i> 动态发布条数</h3>
                <h2>200</h2>
              </el-col>
              <el-col :span="6">
                <h3><i class="point"></i>发布用户</h3>
                <h2>200</h2>
              </el-col>
              <el-col :span="6">
                <h3><i class="point"></i>发布率</h3>
                <h2>200</h2>
              </el-col>
            </el-row>
            <div class="line"></div>
            <h4 class="time"><i class="iconfont">&#xe746;</i>2021-10-05</h4>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="card1">
            <el-row class="cardRow1" :gutter="20">
              <el-col :span="6">
                <div class="iconbox">
                  <i class="iconfont">&#xe7b2;</i>
                </div>
              </el-col>
              <el-col :span="6">
                <h3><i class="point"></i> 发布评论数</h3>
                <h2>200</h2>
              </el-col>
              <el-col :span="6">
                <h3><i class="point"></i>评论用户数</h3>
                <h2>200</h2>
              </el-col>
              <el-col :span="6">
                <h3><i class="point"></i>评论率</h3>
                <h2>200</h2>
              </el-col>
            </el-row>
            <div class="line"></div>
            <h4 class="time"><i class="iconfont">&#xe746;</i>2021-10-05</h4>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="card1">
            <el-row class="cardRow1" :gutter="20">
              <el-col :span="6">
                <div class="iconbox">
                  <i class="iconfont">&#xe753;</i>
                </div>
              </el-col>
              <el-col :span="6">
                <h3><i class="point"></i> 动态点赞数</h3>
                <h2>200</h2>
              </el-col>
              <el-col :span="6">
                <h3><i class="point"></i>点赞用户数</h3>
                <h2>200</h2>
              </el-col>
              <el-col :span="6">
                <h3><i class="point"></i>点赞率</h3>
                <h2>200</h2>
              </el-col>
            </el-row>
            <div class="line"></div>
            <h4 class="time"><i class="iconfont">&#xe746;</i>2021-10-05</h4>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="card1">
            <el-row class="cardRow1" :gutter="20">
              <el-col :span="6">
                <div class="iconbox">
                  <i class="iconfont">&#xe764;</i>
                </div>
              </el-col>
              <el-col :span="6">
                <h3><i class="point"></i> 动态分享数</h3>
                <h2>200</h2>
              </el-col>
              <el-col :span="6">
                <h3><i class="point"></i>分享用户数</h3>
                <h2>200</h2>
              </el-col>
              <el-col :span="6">
                <h3><i class="point"></i>分享率</h3>
                <h2>200</h2>
              </el-col>
            </el-row>
            <div class="line"></div>
            <h4 class="time"><i class="iconfont">&#xe746;</i> 2021-10-05</h4>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: "1",
      timeArr: [],
      startTime: "",
      endTime: "",
      timeOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  methods: {
    focus() {
      if (!this.timeArr) {
        this.timeArr = [];
      }
      this.startTime = this.timeArrA[0];
      this.endTime = this.timeArrA[1];
    },
  },
};
</script>

<style lang="less" scoped>
.ADynamicAnalysis {
  padding: 20px;
  .searchBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    h3 {
      margin: 0;
      display: flex;
      align-items: center;
      .tt {
        display: inline-block;
        width: 5px;
        height: 18px;
        margin-right: 5px;
        background-color: #7b94d8;
      }
    }
    .right {
      display: flex;
      align-items: center;
    }
  }
  .cardRow {
    margin-top: 20px;
    .card {
      height: 150px;
      border: 2px solid #ebeff8;
      border-radius: 5px;
      h3 {
        display: flex;
        align-items: center;
        padding-left: 10px;
        .point {
          display: inline-block;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          border: 5px solid #7b94d8;
          margin-right: 10px;
        }
      }
      h1 {
        margin: 0px 0;
        text-align: right;
        padding-right: 20px;
        i {
          color: #7b94d8;
        }
      }
      .line {
        margin-top: 10px;
        border-top: 2px solid #ebeff8;
      }
      .foot {
        padding: 10px 20px 0;
        font-weight: 700;
        display: flex;
        align-items: center;
        i {
          color: #7b94d8;
          margin-right: 5px;
        }
      }
    }
    .card1 {
      border: 2px solid #ebeff8;
      height: 150px;
      border-radius: 5px;
      margin-bottom: 20px;
      .cardRow1 {
        .iconbox {
          width: 100%;
          height: 60px;
          text-align: center;
          i {
            font-size: 60px;
            color: #7b94d8;
          }
        }
        padding: 20px;
        h3 {
          margin: 0;
          display: flex;
          align-items: center;
          .point {
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 4px solid #7b94d8;
            margin-right: 5px;
          }
        }
        h2 {
          padding-left: 20px;
          margin: 20px 0 0;
        }
      }
      .line {
        border-top: 2px solid #ebeff8;
      }
      .time {
        margin: 8px 20px 0;
        text-align: right;
        i {
          color: #7b94d8;
          margin-right: 5px;
        }
      }
    }
  }
}
</style>